<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        #xbw{border: 2px black solid;
        width: 300px;
        height: 150px}
    </style>
</head>
<body>
<div id="app">
<el-container>
    <el-header>
       <div>
           <el-row gutter="20" >
               <el-col span="2">
                   <h1 style="margin-left: 150px">HOTEL</h1>
                   <!--<img src="a.jpg" style="width: 100%;height: 100%">-->
               </el-col>
               <el-col span="18">
                  <div style="margin-left: 600px">
                      <el-menu :default-active="activeIndex" mode="horizontal">
                          <el-menu-item index="1">首页</el-menu-item>
                          <el-menu-item index="2">单间</el-menu-item>
                          <el-menu-item index="3">大床房</el-menu-item>
                          <el-menu-item index="4">双人间</el-menu-item>
                          <el-menu-item index="5">套房</el-menu-item>
                          <el-submenu index="6">
                              <template slot="title">更多</template>
                              <el-menu-item index="6-1">联系方式</el-menu-item>
                              <el-menu-item index="6-2">求职招聘</el-menu-item>
                              <el-menu-item index="6-3">法律法规</el-menu-item>
                          </el-submenu>
                      </el-menu>
                  </div>
               </el-col>
                  <el-col span="4">
                      <el-menu :default-active="activeIndex1" mode="horizontal">
                          <el-menu-item index="1"><a href="">注册</a></el-menu-item>
                          <el-menu-item index="2"><a href="">登录</a></el-menu-item>
                      </el-menu>
                  </el-col>

           </el-row>

       </div>
    </el-header>
    <el-main id="xx" style="height:800px">
        <el-row gutter="20">
            <el-col span="18" style="margin: 10px 0" v-for="item in pictureArr">
                <el-card >
                    <img :src="item.imgUrl" style="width: 100%;height: 100%;height: 600px">
                    <p style="height: 40px;font-size: 28px;font-weight: bold;padding-left: 500px">贵族大床房</p>
                    <p>大床房大床房大床房大床房大床房大床房大床房大床房大床房大床房大床房大床房大床房大床
                        房大床房大床房大床房大床房大床房大床房大床房大床房大床房</p>
                </el-card>
            </el-col>
            <el-col span="6">
               <el-card style="margin-top: 12px">
                   <el-form>
                       <el-form-item label="预定日期">
                           <el-input type="text" v-model="user.date" placeholder="请输入预定日期"></el-input>
                       </el-form-item>
                       <el-form-item label="预定天数"><el-input v-model="user.day" type="text" placeholder="请输入预定天数"></el-input></el-form-item>
                  <el-form-item>
                      <el-button type="primary" style="position: relative;left: 160px" @click="ok()">
                         预定
                      </el-button>
                  </el-form-item>
                   </el-form>
               </el-card>
                <div id="xbw" style="margin: 150px auto">
                    <h1 style="margin-left: 90px">客服电话</h1>
                    <p>24小时客服电话，快速咨询和预定</p>
                    <p>120-110-119-110</p>
                </div>
            </el-col>
        </el-row>
    </el-main>


    <el-footer></el-footer>
</el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {
                activeIndex: '1',
                activeIndex1:'1',
                user:localStorage.user?JSON.parse(localStorage.user):null,
                pictureArr:[{"imgUrl":"https://tse2-mm.cn.bing.net/th/id/OIP-C.aYH9Jm4Ti_vkZKrS3a_3wQHaE6?w=267&h=180&c=7&r=0&o=5&pid=1.7",
                }],
                user:{date:"",day:""}
            }
        },
        methods:{
            handleSelect(key,keyPath){
                if (key==1){
                    location.href="/";
                }
            },
            ok(){
                confirm("预定成功！")
            }
        }
    })
</script>
</html>